$(function () {
  
  //查询参数对象
  let q = {
    //页码值
    pagenum:'1',
    // 每页展示的条数
    pagesize:5,
    //文章的分类  空表示没有条件
    cate_id:'',
    //发布状态 空代表没有发布状态
    state:''
  }
  //文章列表数据
  function initArtList() {
    //根据接口发送请求
    axios.get('/my/article/list', {
      // 携带参数q
      params:q
    }).then(({ data: res }) => {
      // console.log(res)
      // 判断请求是否成功
      if (res.code == 0) {
        //定义空数组
        let rows = []
        //遍历请求回来的数据数组
        res.data.forEach(item => {
          //将遍历的值添加到空数组中并渲染好标签
          rows.push(`
            <tr>
              
                <td><a href="javascript:;" style="color:blue " class="show-detail" data-id="${item.id}">${item.title}</a></td>
                <td>${item.cate_name}</td>
                <td>${dayjs(item.pub_date).format('YYYY-MM-DD  HH:mm:ss')}</td>
                <td>${item.state}</td>
                <td>
                  <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="${item.id}">删除</button>
                </td>
              
            </tr>
          `)
        })
        $('tbody').html(rows)
        renderpage(res.total)
      }
    })
  }
  initArtList()


  //文章分类
  function initCateList() {
    axios.get('/my/cate/list').then(({ data: res }) => {
      if (res.code == 0) {
        let rows = []
        res.data.forEach(item => {
          rows.push(`
            <option value="${item.id}">${item.cate_name}</option>
          `)
        })
        $('[name="cate_id"]').append(rows)
        layui.form.render('select')
      }
    })
  }
  initCateList()

  //筛选
  $('.layui-form-pane').on('submit', function (e) {
    e.preventDefault()
    // console.log(123)
    q.cate_id=$('[name="cate_id"]').val()
    q.state = $('[name="state"]').val()
    // console.log(q.cate_id)
    q.pagenum=1
    initArtList()
  })

  //重置
  $('[type="reset"]').on('click', function () {
    q.cate_id=''
    q.state=''
    q.pagenum = 1
    initArtList()
  })



  // 渲染分页
  function renderpage(total) {
    layui.laypage.render({
      elem: 'page-box', //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit:q.pagesize,//每页展示多少条数据
      curr: q.pagenum,//高亮页码
      layout:['count','limit','prev', 'page', 'next','skip'],
      limits:[2,4,6,8,10],
      jump: function(obj, first){
        //obj包含了当前分页的所有参数，比如：
        //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        q.pagenum=obj.curr
        //console.log(obj.limit); //得到每页显示的条数
        q.pagesize=obj.limit
        //首次不执行
        if(!first){
          //do something
          initArtList()
        }
      }
    });
  }



  //删除
  $('tbody').on('click','.btn-delete', function () {
    let id = $(this).attr('data-id')
    // console.log(id)
    layer.confirm('确定删除?', {icon: 3, title:'提示'}, function(index){
      axios.delete('/my/article/info', {
        params:{id}
      }).then(({ data: res }) => {
        if (res.code == 0) {
          layer.msg('已删除')
          if (q.pagenum > 1 && $('tbody tr').length == 1) {
            q.pagenum--
          }
          initArtList()
        }
      })
      
      layer.close(index);
    });
  })





  $('tbody').on('click', '.show-detail', function () {
    let id = $(this).attr('data-id')
    console.log(id)
    axios.get('/my/article/info', {
      params:{id}
    }).then(({data: res}) => {
      if (res.code === 0) {
        // console.log(res)
        layer.open({
          type: 1,
          area:['80%','80%'],
          title: '在线调试',
          content: `
            <div class="artinfo-box">
            <h1 class="artinfo-title">${res.data.title}</h1>
            <div class="artinfo-bar">
              <span>作者：${res.data.nickname||res.data.username}</span>
              <span>发布时间：${dayjs(res.data.pub_date).format('YYYY-MM-DD HH:mm:ss')}</span>
              <span>所属分类：${res.data.cate_name}</span>
              <span>状态：${res.data.state}</span>
            </div>
            <hr>
            <img src="http://www.liulongbin.top:3008${res.data.cover_img}" alt="" class="artinfo-cover">
            <div>${res.data.content}</div>
            </div>
          `
        }); 
      }
      
    })
  })








})
